<template>
    <div>
        <!--<el-button-group>
            <el-button type="primary" @click="addMsg(1)">添加文本</el-button>
            <el-button type="primary" @click="addMsg(2)">添加地理</el-button>
            <el-button type="primary" @click="addMsg(3)">添加表情</el-button>
            <el-button type="primary" @click="addMsg(4)">添加语音</el-button>
            <el-button type="primary" @click="addMsg(5)">添加图像</el-button>
            <el-button type="primary" @click="addMsg(6)">添加文件</el-button>
            <el-button type="primary" @click="addMsg(7)">添加视频</el-button>
        </el-button-group>-->
        <div
                class="editor"
                contenteditable="true"
                ref="editor"
                @keydown.enter.prevent="handleSendMsg"
                @paste.prevent="onPaste">
        </div>
        <el-button @click="handleSendMsg()">发送
        </el-button>

    </div>
</template>

<script>
    import EditDiv from "_c/edit-div";
    import {paste} from "_l/edit.div";

    export default {
        name: "send-msg",
        components: {EditDiv},
        props: {
            type: {
                type: String
            }
        },
        data() {
            return {
                // 消息体
                msgBody: [],
                msg: null,
                innerText: null,

                editor: null
            }
        },
        methods: {
            addMsg(type) {
                switch (type) {
                    case 1:
                        // 文本消息
                        let textElem = {};
                        textElem.msgType = 'TEXT';
                        textElem.msgContent = {
                            text: 'hello 你好 文本消息'
                        };
                        this.msgBody.push(textElem);
                        break;
                    case 2:
                        // 地理消息
                        let locationElem = {};
                        locationElem.msgType = 'LOCATION';
                        locationElem.msgContent = {
                            desc: '吉林省长春市高新区南四环龙首一号院',
                            latitude: 29.340656774469956,
                            longitude: 116.77497920478824
                        };
                        this.msgBody.push(locationElem);
                        break;
                    case 3:
                        // 表情消息
                        let faceElem = {};
                        faceElem.msgType = 'FACE';
                        faceElem.msgContent = {
                            index: '1',
                            data: '表情额外信息'
                        };
                        this.msgBody.push(faceElem);
                        break;
                    case 4:
                        // 语音消息
                        let soundElem = {};
                        soundElem.msgType = 'SOUND';
                        soundElem.msgContent = {
                            url: 'https://1234-5678187359-1253735226.cos.ap-shanghai.myqcloud.com/abc123/c9be9d32c05bfb77b3edafa4312c6c7d',
                            size: 62351,
                            second: 1,
                            downloadFlag: 2
                        };
                        this.msgBody.push(soundElem);
                        break;
                    case 5:
                        // 图像消息
                        let imageElem = {};
                        imageElem.msgType = 'IMAGE';
                        imageElem.msgContent = {
                            uuid: '1853095_D61040894AC3DE44CDFFFB3EC7EB720F',
                            imageFormat: 1,
                            imageInfoArray: []
                        };
                        let imageInfoObj = {};
                        imageInfoObj.type = 1;
                        imageInfoObj.size = 1853095;
                        imageInfoObj.width = 2448;
                        imageInfoObj.height = 3264;
                        imageInfoObj.url = 'http://xxx/3200490432214177468.jpg';
                        imageElem.msgContent.imageInfoArray.push(imageInfoObj);
                        imageElem.msgContent.imageInfoArray.push(imageInfoObj);
                        imageElem.msgContent.imageInfoArray.push(imageInfoObj);
                        this.msgBody.push(imageElem);
                        break;
                    case 6:
                        // 文件消息
                        let fileElem = {};
                        fileElem.msgType = 'FILE';
                        fileElem.msgContent = {
                            url: 'https://1234-5678187359-1253735226.cos.ap-shanghai.myqcloud.com/abc123/c9be9d32c05bfb77b3edafa4312c6c7d',
                            fileSize: 1773552,
                            fileName: '愤怒的小鸟.MOV',
                            downloadFlag: 2
                        };
                        this.msgBody.push(fileElem);
                        break;
                    case 7:
                        // 视频消息
                        let videoFileElem = {};
                        videoFileElem.msgType = 'VIDEO';
                        videoFileElem.msgContent = {
                            videoUrl: 'https://1234-5678187359-1253735226.cos.ap-shanghai.myqcloud.com/abc123/c9be9d32c05bfb77b3edafa4312c6c7d',
                            videoSize: 1773552,
                            videoSecond: 5,
                            videoFormat: 'mp4',
                            videoDownloadFlag: 2,
                            thumbUrl: 'https://0345-1400187352-1256635546.cos.ap-shanghai.myqcloud.com/abcd/a6c170c9c599280cb06e0523d7a1f37b',
                            thumbSize: 13907,
                            thumbWidth: 720,
                            thumbHeight: 1280,
                            thumbFormat: 'JPG',
                            thumbDownloadFlag: 2
                        };
                        this.msgBody.push(videoFileElem);
                        break;
                }
                this.$emit('handlerResult', this.msgBody);
                this.msgBody = [];
            },
            handleSendMsg() {
                const value = this.editor.innerHTML.replace(/[\n\r]$/, '')
                if (value){
                    let arr = [];
                    if (value.indexOf('<') > -1) {
                        let str = '';
                        let tem = false;
                        for (let i = 0; i < value.length; i++) {
                            if (value[i] === '<') {
                                tem = true;
                                arr.push(str);
                                str = '<';
                            } else if (value[i] === '>') {
                                tem = false;
                                if (value.length - 1 === i) {
                                    arr.push(str);
                                } else {
                                    arr.push(str);
                                    str = '';
                                }
                            } else {
                                str += value[i];
                                if (value.length - 1 === i) {
                                    arr.push(str);
                                }
                            }
                        }
                    } else {
                        arr.push(value)
                    }

                    this.msgBody = [];
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i].indexOf('<img') > -1) {
                            let imageElem = {};
                            imageElem.msgType = 'IMAGE';
                            imageElem.msgContent = {
                                uuid: '1853095_D61040894AC3DE44CDFFFB3EC7EB720F',
                                imageFormat: 1,
                                imageInfoArray: []
                            };
                            let imageInfoObj = {};
                            imageInfoObj.type = 1;
                            imageInfoObj.size = 1853095;
                            imageInfoObj.width = 2448;
                            imageInfoObj.height = 3264;
                            imageInfoObj.url = arr[i].substr(0,10)+'.jpg';
                            imageElem.msgContent.imageInfoArray.push(imageInfoObj);
                            imageElem.msgContent.imageInfoArray.push(imageInfoObj);
                            imageElem.msgContent.imageInfoArray.push(imageInfoObj);
                            this.msgBody.push(imageElem);
                        } else {
                            let textElem = {};
                            textElem.msgType = 'TEXT';
                            textElem.msgContent = {
                                text: arr[i]
                            };
                            this.msgBody.push(textElem);
                        }
                    }
                    this.$emit('handlerResult', this.msgBody);
                    this.msgBody = [];
                    this.editor.innerText = ''
                }else{
                    this.$message.info('请输入内容')
                }
            },
            async onPaste(e) {
                const result = await paste(e)
                const imgRegx = /^data:image\/png;base64,/
                if (imgRegx.test(result)) {
                    document.execCommand('insertImage', false, result)
                } else {
                    document.execCommand('insertText', false, result)
                }
            },
            resVal(){
                this.editor.innerText = ''
            }
        },
        mounted() {
            this.editor = this.$refs['editor']
        }
    }
</script>

<style scoped>
    .editor {
        width: 100%;
        height: 180px;
        border-radius: 4px;
        background: #fff;
        border: 1px solid #ccc;
        box-sizing: border-box;
        overflow: scroll;
        word-break: break-all;
        overflow-wrap: break-word;
        padding: 5px;
        outline: none;
    }
</style>